import React, { Component } from 'react'
import axios from "axios"
import { Tabs } from 'antd';
// import PubSub from 'pubsub-js' 
const { TabPane } = Tabs;

export class Classify extends Component {
    state={
        list:[],
        listChildren:[],
        shopCar:[]
    }
    componentDidMount(){
        axios.get("/list").then(res=>{
            console.log(res);
            this.setState({
                list:res.data.list,
                listChildren:res.data.list[0].children
            })
        })
        // this.aaa()
       
      
    }

    aaa(){
        console.log("aaa");
    }
    callback(key) {
        console.log(key);
        let data = this.state.list
        let newData = data[key].children
        this.setState({listChildren:newData})
    }
    //去详情页的fn
    gotoDetail(item){
        console.log(this.props);
        // 只是跳详情 不传值
        // this.props.history.push("/detail")

        //需要传值的情况  需要写pathname  和你的传参方式
        this.props.history.push({pathname:"/detail",state:item})

        //需要传值的情况  需要写pathname  和你的传参方式
        // this.props.history.push({pathname:"/detail",query:item})
        //query 和state的区别在于  query 刷新页面丢失数据  state 刷新不丢失

        //动态路由传参
        this.props.history.push({pathname:`/detail/${item.id}`,state:item})
        // this.props.history.push({pathname:"/detail/"+item.id,state:item})

    }
    //防抖原理
    //概念 点击多次只触发一个
    debouceFn(fn,timer){
        let timeout = null
        return function () {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
                fn.apply(this,arguments)
            }, timer);
        }
    }

    //节流原理
    //概念：控制他在一定的时间内触发一次
    /*
        1.设置一个变量，限制当他是true的时候才能进入函数 进入后变为false
        2.设置一个setTimeout 定时器在规定实际之后才能进入执行函数并触发
        2.使用闭包存储变量
    */
    throttleFn(fn,timer){
        let flag = true
        return function () {
            if (!flag) return;
            flag=false
            fn.apply(this,arguments)
            setTimeout(() => {
                flag=true
            }, timer);
        }
    }

    addShop(item){
        console.log("aaaaaaaaaaaaaaaaa");
        let shopCar = this.state.shopCar
        shopCar.push(item)
        this.setState({shopCar:shopCar})
    }

    gotoShopCar(){
        this.props.history.push({pathname:"/index/shopcar",state:this.state.shopCar})
    }
    
    render() {
        let {list,listChildren} = this.state
        return (
            <div>
                Classify
                <button onClick={this.throttleFn(this.aaa.bind(this),5000)}>aaaaaa</button>
                <button onClick={this.gotoShopCar.bind(this)}>去购物车</button>
                <Tabs defaultActiveKey="1" tabPosition={"left"}  onChange={this.callback.bind(this)}>
                    {
                        list&&list.map((item,index)=>{
                            return  <TabPane tab={item.title} key={index}>
                                {
                                    listChildren&&listChildren.map((item,i)=>{
                                        return <div 
                                            key={i} 
                                            >
                                            <img src={item.img} alt=""  onClick={this.gotoDetail.bind(this,item)}/>
                                            <p>{item.title}</p>
                                            <p>price:{item.price}</p>
                                            <p>count:{item.count}</p>
                                            {/* <button onClick={this.addShop.bind(this,item)}>添加购物车</button> */}
                                            <button onClick={this.debouceFn(this.addShop.bind(this),10000)}>添加购物车</button>
                                        </div>
                                    })
                                }
                        </TabPane>
                        })
                    }
                </Tabs>
            </div>
        )
    }
}

export default Classify